<!DOCTYPE html>
<html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>canvas 画布实例</title>
    
    <!--public css-->
    <link rel="stylesheet" type="text/css" href="../../css/normalize.css"/>
    
    <!--canvas css-->
    <link rel="stylesheet" type="text/css" href="../css/canvas.css"/>

</head>

<body>
    
    <div class="mymain">
        
        <h1>canvas学习制作实例</h1>
        
        <!--旋转八卦-->
    	<div class="canvas_out">
    	    <h3>旋转八卦</h3>
            <canvas id="cvs_bagua" width="100" height="100">
                
            </canvas> 
        </div>
        <!--旋转八卦-->
        
        
        <!--小鸟-->
        <div class="canvas_out">
            <h3>小鸟</h3>
            <div id="ckxtest" style="float: right;"></div>
        	<canvas id="cvs_bird" width="500" height="300"></canvas>
        </div>
        
        
        
        <!--橡皮檫-->
        <div class="canvas_out">
            <h3>刮刮卡</h3>
            <div class="cvs_rubber_out">
            	<canvas id="cvs_rubber" width="320" height="400"></canvas>
            </div>
        </div>
        
        
        <!--时钟-->
        <div class="canvas_out">
            <h3>时钟</h3>
            <canvas id="cvs_clock" width="500" height="500"></canvas>
        </div>
        
        
    </div>
    
	
     
    
    
    <!--public script-->
    <script src="../../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <!--手势插件 quoJS-->
    <script src="../../quojs/quo.standalone.js" type="text/javascript" charset="utf-8"></script>
    
    <!--canvas js-->
    <script src="../js/canvas.js" type="text/javascript" charset="utf-8"></script>
     
     
</body>
</html>